<template>
  <div class="container">
    <div class="table" v-loading="loading" v-show="!mode">
      <div ref="queryform" class="queryform">
        <div class="clearfix">
          <div class="left item">
            <label class="label-size">标签名称：</label>
            <el-input
                size="small"
                style="width:160px;"
                placeholder="请输入"
                v-model="formField.name"
            ></el-input>
          </div>
          <div class="left item">
            <label class="label-size">创建人：</label>
            <el-select
                clearable
                size="small"
                v-model="formField.createUserName"
                placeholder="请选择"
                style="width:160px;"
            >
              <selectOptions
                  :options="
                    () =>
                      $api.api_urcap_auth_user({

                      })
                      .then(res => {
                        return res.data
                      })
                  "
                  :labelField="'roleName'"
                  :valueField="'id'"
              >
              </selectOptions>
            </el-select>
          </div>
          <div class="right item">
            <el-button @click="resetSearch" size="small" icon="el-icon-refresh" class="default-btn">重置</el-button>
            <el-button @click="searchList" size="small" icon="el-icon-search" class="plain-btn">查询</el-button>
          </div>
        </div>
      </div>
      <div class="table-body">
        <div class="clearfix" style="margin-bottom: 10px">
          <el-button size="small" class="green-btn" @click="handleAdd">创建标签
          </el-button>
        </div>
        <el-table :data="tableData" :border="false" style="width: 100%">
          <el-table-column prop="tagViewName" label="标签名称"></el-table-column>
          <el-table-column prop="" label="数据类型"></el-table-column>
          <el-table-column prop="peopleCoveredNum" label="覆盖人数"></el-table-column>
          <el-table-column prop="tagPliesNum" label="标签分层"></el-table-column>
          <el-table-column prop="createUserName" label="创建人"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" sortable></el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="customEdit(scope)">编辑</el-button>
              <el-button size="small" type="text" @click="customRemove(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="clearfix">
          <el-pagination
              style="text-align: center"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.pageIndex"
              :page-sizes="[10,20,30,40,50]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!--表单-->
    <tag-form ref="detailForm" :mode="mode" :tagType="formField.tagType" @back="back" v-show="mode"></tag-form>
  </div>
</template>

<script>
import table from '@/mixins/table.js'
import {sandbox} from '@/libs/util'
import TagForm from "./components/tagForm";

export default {
  mixins: [table],
  components: {TagForm},
  data() {
    return {
      formField: sandbox({
        tagType: 'judicial_case',
        name: '',
        createUserName: '',
      }),
      tableData: [],
    }
  },
  methods: {
    LoadTableDataMethod() {
      return this.$api
          .api_urcap_suspectTag_queryPage({
            body: Object.assign(this.formField, this.pagination)
          })
          .then(res => {
            this.tableData = res.data.records
            this.pagination.currentPage = res.data.current
            this.pagination.pageSize = res.data.size
            this.pagination.total = res.data.total
          })
    },
    // 新增
    handleAdd() {
      this.mode = 'add'
    },
    // 编辑
    customEdit({row}) {
      this.mode = 'edit'
      this.$refs.detailForm.SetData(row)
    },
    // 删除
    customRemove({row}) {
      this.$confirm('确认删除该数据？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.$api
            .api_urcap_suspectTag_delete({param: {id: row.id}})
            .then(() => {
              this.fetchData()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
